<template>
  <div id="layout_main">
    <el-container>
      <el-aside width="auto" v-if="!$route.meta.hideMenu">
        <!-- 主菜单入口 -->
        <menuMain />
      </el-aside>
      <el-container>
        <!-- v-if="!$route.meta.hideHeader" -->
        <el-header>
          <!-- 头部入口 -->
          <headMain />
        </el-header>
        <el-main>
          <!--二级主体页面入口-->
          <router-view />
        </el-main>
        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less">
  #layout_main {
    height: 100%;
    height: 100vh;
    min-height: 450px;
    .el-container {
      height: 100%;
      height: 100vh;
    }
    .el-header,
    .el-footer {
      background-color: #fff;
      color: #333;
    }
    .el-header {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .el-aside {
      background-color: #001529;
      color: #fff;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    }
    .el-main {
      background-color: #e9eef3;
      color: #333;
    }
  }
</style>

<script>
  import menuMain from './components/menuMain'
  import headMain from './components/headMain'
  export default {
    data() {
      return {
      }
    },
	methods:{
	},
    components:{
      headMain,
      menuMain
    }
  };
</script>
